import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ProTable } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';
import { queryParkinglotNames } from '../Spot/service';
import type { ParkingRecordTableListItem } from './types.d';
import { ParkingRecordStatus } from './types.d';
import { queryParkingRecords } from './service';
import { useState } from 'react';
import RecordDetailModal from './RecordDetailModal';
// import { useModel } from 'umi';
// import { Role } from '@/utils/types.d';
// import FlowPath from './components/FlowPath';

export default () => {
  // const { initialState } = useModel('@@initialState');
  // const currUser = initialState?.currentUser;
  // const isAdmin = currUser?.role === Role.ADMIN;
  const [currRecordId, setCurrRecordId] = useState<string>('');
  const [recordDetailVisible, setRecordDetailVisible] = useState<boolean>(false);
  const columns: ProColumns<ParkingRecordTableListItem>[] = [
    {
      title: '停车记录编号',
      dataIndex: '_id',
      align: 'center',
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      align: 'center',
    },
    {
      title: '路段名称',
      dataIndex: 'parkingLotId',
      hideInForm: true,
      width: 120,
      fieldProps: { showSearch: true },
      render: (_, record) => record.parkingLotName,
      debounceTime: 300,
      request: (val) => queryParkinglotNames(val.keyWords),
    },
    {
      title: '泊位编号',
      dataIndex: 'spotId',
      hideInForm: true,
      align: 'center',
      width: 100,
      order: 2,
    },
    {
      title: '驶入时间',
      dataIndex: 'inTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
      width: 150,
    },
    {
      title: '驶出时间',
      dataIndex: 'outTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
      width: 150,
    },
    {
      title: '驶入类型',
      dataIndex: 'inType',
      align: 'center',
      valueEnum: {
        manual: '人工',
        sensor: '地磁',
        patrol: '巡检车',
      },
    },
    {
      title: '驶出类型',
      dataIndex: 'outType',
      align: 'center',
      valueEnum: {
        manual: '人工',
        sensor: '地磁',
        patrol: '巡检车',
      },
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
      hideInForm: true,
      width: 120,
      order: 1,
    },
    {
      title: '车辆类型',
      dataIndex: 'vehicleType',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      width: 100,
      valueEnum: {
        0: { text: '普通小型车' },
        1: { text: '普通大型车' },
        2: { text: '新能源小型车' },
        3: { text: '新能源大型车' },
        4: { text: '警车' },
        5: { text: '武警' },
      },
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '记录状态',
      dataIndex: 'status',
      hideInForm: true,
      align: 'center',
      width: 80,
      valueEnum: {
        1: {
          text: '正常',
          status: 'Success',
        },
        2: {
          text: '异常',
          status: 'Error',
        },
      },
    },
    {
      title: '异常状态描述',
      dataIndex: 'description',
      ellipsis: true,
      hideInForm: true,
      hideInSearch: true,
      width: 150,
      render: (_, record) =>
        record.status == ParkingRecordStatus.EXCEPTION
          ? record.description[record.description.length - 1]
          : '暂无数据',
    },
    {
      title: '是否结束',
      dataIndex: 'isEnded',
      align: 'center',
      hideInForm: true,
      width: 100,
      valueEnum: {
        true: { text: '结束', status: 'Default' },
        false: { text: '进行中', status: 'Processing' },
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'dateTime',
      width: 150,
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      width: 60,
      render: (_, record) => [
        <a
          key={record._id}
          onClick={() => {
            setCurrRecordId(record._id);
            setRecordDetailVisible(true);
          }}
        >
          详情
        </a>,
      ],
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '停车记录',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/parking', breadcrumbName: '停车管理' },
            { path: '/parking/records', breadcrumbName: '停车记录' },
          ],
        },
      }}
    >
      <ProTable<ParkingRecordTableListItem>
        columns={columns}
        rowKey="_id"
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="暂无数据"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryParkingRecords(param, sort);
          return res;
        }}
      />
      {currRecordId && (
        <RecordDetailModal
          visible={recordDetailVisible}
          recordId={currRecordId}
          close={() => {
            setRecordDetailVisible(false);
            setCurrRecordId('');
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};
